<template>
  <div class="p-5">
    <div class="drone">
      <div class="drone-left">
        <airlineview :airlineData="airlineData" :changeViewId="changeViewId" />
      </div>
      <div class="drone-center">
        <videoview />
      </div>
      <div class="drone-right">
        <instrumentview :instrumentList="instrumentList" :instrumentData="instrumentData"></instrumentview>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import airlineview from './module/airlineview.vue';
import videoview from './module/videoview.vue';
import instrumentview from './module/instrumentview.vue';

import { useRouter } from 'vue-router';

const router = useRouter();
const changeViewId = ref(1);
const airlineData = ref({
  num: '1',
  Id: 'JDl mavic 3 pro',
  name: '李孝利',
  adress: '大力路警务站',
  names: '民警小李',
  distance: '2025年2月28日 14:24:33',
  number: '235688Dq45369',
  status: '已连接',
});
// 同样，这里的 url 也可以使用以 http 开头的外部链接
const instrumentList = ref([
  {
    id: 1,
    num: '92%',
    name: '遥控信号',
    icon: 'ion:home-outline',
    url: 'flaybg17.png',
  },
  {
    id: 1,
    num: '92%',
    name: '图传信号',
    icon: 'ion:home-outline',
    url: 'flaybg17.png',
  },
  {
    id: 1,
    num: '75%',
    name: '飞机电量',
    icon: 'ion:home-outline',
    url: 'flaybg15.png',
  },
  {
    id: 1,
    num: '83%',
    name: '遥控电量',
    icon: 'ion:home-outline',
    url: 'flaybg21.png',
  },
  {
    id: 1,
    num: '39℃',
    name: '电池温度',
    icon: 'ion:home-outline',
    url: 'flaybg19.png',
  },
  {
    id: 1,
    num: '-6.5A',
    name: '电流',
    icon: 'ion:home-outline',
    url: 'flaybg22.png',
  },
  {
    id: 1,
    num: '13.6V',
    name: '电压',
    icon: 'ion:home-outline',
    url: 'flaybg18.png',
  },
]);
const instrumentData = ref({
  id: 1,
  num: '16',
  num1: '231m',
  num2: '118.63255665',
  num3: '39.26366613',
});

const getchangeView = (item) => {
  changeViewId.value = item;
};
</script>

<style lang="scss" scoped>
.p-5 {
  width: 100%;
  height: 100%;
  padding: 0.5vh;
  background-image: url('../../../../assets/jcbs_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.drone {
  display: flex;
  height: 100%;

  .drone-left {
    width: calc(30% - 0.5vh);
    height: 100%;
    margin-right: 0.5vh;
  }

  .drone-center {
    height: 100%;
    width: 45%;
  }

  .drone-right {
    width: calc(25% - 0.5vh);
    height: 100%;
    margin-left: 0.5vh;
  }
}
</style>
